<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单列布局-垂直居中</title>
	<style type="text/css">
		/* 第一种 flex 
		  兼容性不太好
		*/
		.wapper {
			display: flex;
			justify-content: center;
			flex-direction: column;
			-webkit-display: flex;
			-moz-display: flex;
			-ms-display: flex;
			height: 400px;
			background: #888;
		}
		.box {
			border: 1px solid #f00;
			width: 90%;
			height: 200px;
		}
	</style>

</head>
<body>
	<div class="wapper">
		<div class="box"></div>
	</div>
</body>
</html>